<template>
  <div class="recomment_box">
      <div class="recommend_items">
          <div class="recommend_item">
            <template v-for="(item,index) in recommend_list">
              <router-link :to="{name:'PhotoInfo',query:{pic_url:item.url}}" :key="index">
                  <el-image :src="item.url" alt="" lazy class="img_list">
                      <div slot="placeholder" class="image-slot">
                    <img src="../../assets/images/loading.png" alt="">
                </div>
                  </el-image>
                  
              </router-link>
          </template>
        </div>  
      </div>
      <div class="bottom_pages">
          <el-pagination
             @current-change="handleCurrentChange"
            background
            :current-page="currentPage" 
            layout="prev, pager, next,jumper"
            :total="500">
            </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
    name:'recommend',
    data() {
        return {
            recommend_list:[],
            start:0,
             // 默认显示第几页
            currentPage:1,
        }
    },
    methods:{

        getData(){
            var url='https://realwds-api.vercel.app/360/getAppsByCategory?cid=36&start='+this.start+'&count=21'
            this.$axios.get(url)
            .then(res=>{
                // console.log(res.data.data.data);
                this.recommend_list=res.data.data.data
            })
        },
          // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
           this.start=this.currentPage*21-21
        //    console.log(this.currentPage);
        //    console.log(this.start);
           this.getData()
           //点击分页实现回到顶部
           window.scrollTo(0,0);
       }
       
    },
    created(){
        this.getData()
    }
}
</script>

<style scoped>
    .recomment_box{
        width: 1200px;
        margin: 10px auto;
    }
    .recommend_item{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 1640.48px;
    }
    .recommend_item .img_list{
        width: 390px;
        height: 220px;
        margin-bottom: 10px;
        position: relative;
        cursor: pointer;
    }
    .recommend_item .img_list:hover{
        box-shadow: 0px 0px 10px 3px black;
        transition: all .4s;
    }
    .image-slot img{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
    }
    .bottom_pages{
        width: 100%;
        margin: 20px 0px 30px 0px;
        text-align: center;
    }
    
</style>